<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="速康">
		<meta name="description" content="速康">
		<meta name="author" content="LiWei">
		<title>首页</title>
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="css/index_content.css"/>
		<link rel="stylesheet" href="css/footer.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<link rel="stylesheet" href="css/product.css" />
		<style>
	.expert_introduce>h5 {
			font-size: 20px;
			font-weight: normal;
			padding: 50px 0 50px 10%;
		}
		.expert_introduce>h5 a{
			margin-left: 50px;
		}
		.expert_introduce {
			background-color: #f2f5f6;
		}
		</style>
	</head>
	<body ng-app="">
		<div ng-include="'header.html'"></div>
		<div class="carousel">
			 <div class="swiper-container swiper-container1">
        		<div class="swiper-wrapper">
		            <div class="swiper-slide"><img width="100%" src="img/swiper1.png" alt="" /></div>
		            <div class="swiper-slide"><img width="100%" src="img/swiper1.png" alt="" /></div>
		            <div class="swiper-slide"><img width="100%" src="img/swiper1.png" alt="" /></div>
		            <div class="swiper-slide"><img width="100%" src="img/swiper1.png" alt="" /></div>
	        	</div>
        		<!-- Add Pagination -->
       	 		<div class="swiper-pagination"></div>
       	 		<div class="swiper-button-next swiper-button-white"></div>
        		<div class="swiper-button-prev swiper-button-white"></div>
    		</div>
		</div>
		<div class="menu">
			<ul class="menu_list">
				<li>
					<a href="javaScript:void(0)">
						<img src="img/menu1.png" alt="" />
						<h5>儿童康复故事</h5>
					</a>
				</li>
				<li>
					<a href="javaScript:void(0)">
						<img src="img/menu1.png" alt="" />
						<h5>成人康复故事</h5>
					</a>
				</li>
				<li>
					<a href="javaScript:void(0)">
						<img src="img/menu1.png" alt="" />
						<h5>免费评估</h5>
					</a>
				</li>
			</ul>
		</div>
		<div class="video_part">
			<div class="video_content">
				<video id="video1" poster="img/poster1.png">
					<!--<source src="img/mv.mp4" type="video/mp4">-->
  					<source src="" type="video/ogg">
					您的浏览器不支持观看视频。
				</video>
				<div class="play">
					
				</div>
			</div>
			<div class="video_explain">
				<h5>视频宣传（一对一）</h5>
				<p>Mark几年前身患中风，很多传统治疗师都说他难以康复了，他的妻子却从未放弃。偶然的一次机会，她接触到“远程康复模式”和“速康生物反馈系统”设备，她决定尝试一下。艾伦是Mark的治疗师，艾伦通过远程视频极为耐心地指导他做以毫米为计量的康复运动。在爱人和治疗师的鼓励下，他的身体一点点的恢复着，他许久未见的好友都说他的进步明显。</p>
				<span>免费评估</span>
				<a class="more" href="javaScript:void(0)">了解更多</a>
			</div>
		</div>
		<div class="product">
			<h5>产品设备<a class="more" href="javaScript:void(0)">了解更多</a></h5>
			<div class="product_list">
				<div class="swiper-container swiper-container2">
        			<div class="swiper-wrapper">
            			<div class="swiper-slide"><a href="javaScript:void(0)"><img src="img/product1.png"/></a>
            				<p>产品设备名称</p>
            			</div>
            			<div class="swiper-slide"><a href="javaScript:void(0)"><img src="img/product2.png"/></a>
            				<p>产品设备名称</p>
            			</div>
            			<div class="swiper-slide"><a href="javaScript:void(0)"><img src="img/product3.png"/></a>
            				<p>产品设备名称</p>
            			</div>
            			<div class="swiper-slide"><a href="javaScript:void(0)"><img src="img/product1.png"/></a>
            				<p>产品设备名称</p>
            			</div>
        			</div>
        <!-- Add Pagination -->
        			<div class="swiper-pagination"></div>
         			
    			</div>
    			<div class="swiper-button-next swiper-button-black next2 "></div>
        		<div class="swiper-button-prev swiper-button-black prev2"></div>
			</div>
		</div>
		
		
		<div class="expert_introduce">
			<h5 class="subhead"><span>专家介绍</span><a class="more" href="moreDoctor.html">了解更多</a></h5>
			<div class="experts">
				<div class="swiper-container swiper-container3">
        			<div class="swiper-wrapper">
            			<div class="swiper-slide">
            				<a href="javaScript:void(0)">
            					<img src="img/expert1.png"/>
            					<div class="expert_content animated fadeInUp">
            						<h5>物理治疗师主管</h5>
            						<p>李传平</p>
            						<p>曾工作于上海同济大学附属养志医院阳光康复中心的作业治疗科，毕业于四川大学华西临床医学院。擅长治疗神经系统疾病（中风、脑外伤等）的手功能康复、肩痛处理、ADL训练、认知知觉功能处理、家居安置及社会适应训练等。</p>
            						<span>预约专家</span>
            					</div>
            				</a>        				
            			</div>
            			<div class="swiper-slide">
            				<a href="javaScript:void(0)">
            					<img src="img/expert1.png"/>
            					<div class="expert_content animated fadeInUp">
            						<h5>物理治疗师主管</h5>
            						<p>李传平</p>
            						<p>曾工作于上海同济大学附属养志医院阳光康复中心的作业治疗科，毕业于四川大学华西临床医学院。擅长治疗神经系统疾病（中风、脑外伤等）的手功能康复、肩痛处理、ADL训练、认知知觉功能处理、家居安置及社会适应训练等。</p>
            						<span>预约专家</span>
            					</div>
            				</a>
            			</a></div>
            			<div class="swiper-slide">
            				<a href="javaScript:void(0)">
            					<img src="img/expert1.png"/>
            					<div class="expert_content animated fadeInUp">
            						<h5>物理治疗师主管</h5>
            						<p>李传平</p>
            						<p>曾工作于上海同济大学附属养志医院阳光康复中心的作业治疗科，毕业于四川大学华西临床医学院。擅长治疗神经系统疾病（中风、脑外伤等）的手功能康复、肩痛处理、ADL训练、认知知觉功能处理、家居安置及社会适应训练等。</p>
            						<span>预约专家</span>
            					</div>
            				</a>
            			</div>
            			<div class="swiper-slide">
            				<a href="javaScript:void(0)">
            					<img src="img/expert1.png"/>
            					<div class="expert_content animated fadeInUp">
            						<h5>物理治疗师主管</h5>
            						<p>李传平</p>
            						<p>曾工作于上海同济大学附属养志医院阳光康复中心的作业治疗科，毕业于四川大学华西临床医学院。擅长治疗神经系统疾病（中风、脑外伤等）的手功能康复、肩痛处理、ADL训练、认知知觉功能处理、家居安置及社会适应训练等。</p>
            						<span>预约专家</span>
            					</div>
            				</a>
            			</div>
        			</div>
        <!-- Add Pagination -->
        			<!--<div class="swiper-pagination"></div>-->
        			
    		</div> 			
			<div class="swiper-button-next swiper-button-black next3"></div>
        	<div class="swiper-button-prev swiper-button-black prev3"></div>	
			</div>
		</div>
		
		<div class="appointment_menu_wrap">
			<div class="appointment_menu">
				<h6>免费预约评估</h6>
				<label for=""><span>被预约人姓名</span><input type="text" /><i>*</i></label>
				<label for=""><span>手机</span><input type="text" /><i>*</i></label>
				<label for=""><span>与被预约人关系</span><select name="" id="">
					<option value="">本人</option>
				</select><i>*</i></label>
				<label for=""><span>微信号</span><input type="text" /></label>
			</div>
		</div>
		
		<div class="footer">
			<div class="footer_content">
				<dl>
				<dt>新手指南</dt>
				<dd><a href="javaScript:void(0)">中风康复课程介绍</a></dd>
				<dd><a href="javaScript:void(0)">儿童康复课程介绍</a></dd>
				<dd><a href="javaScript:void(0)">注册&登录</a></dd>
			</dl>
			<dl>
				<dt>关于课程</dt>
				<dd><a href="javaScript:void(0)">康复治疗师团队</a></dd>
				<dd><a href="javaScript:void(0)">速康智创居家康复工作室</a></dd>
				<dd><a href="javaScript:void(0)">远程指导课程介绍</a></dd>
			</dl>
			<dl>
				<dt>商务合作</dt>
				<dd><a href="javaScript:void(0)">加盟合作</a></dd>
				<dd><a href="javaScript:void(0)">应聘老师</a></dd>
				<dd><a href="javaScript:void(0)">加入我们</a></dd>
			</dl>
			<dl>
				<dt>网站声明</dt>
				<dd><a href="javaScript:void(0)">网站声明</a></dd>
				<dd><a href="javaScript:void(0)">帮助中心</a></dd>
				<dd><a href="javaScript:void(0)">意见反馈</a></dd>
			</dl>
			<dl>
				<dt>关于我们</dt>
				<dd><a href="javaScript:void(0)">联系我们</a></dd>
				<dd><a href="javaScript:void(0)">企业文化</a></dd>
			</dl>
			</div>
			<div class="copyright">
				<p>Powered by 速康智创 ©2014-2017</p>
				<p>课程内容版权均归 速康智创 所有 沪ICP备 16004547</p>
			</div>
		</div>
		
	</body>
	<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
			var author ="jonas"
			//	轮播图1
		var swiper = new Swiper('.swiper-container1', {
        	pagination: '.swiper-pagination',
        	paginationClickable: true,
        	nextButton: '.swiper-button-next',
       		prevButton: '.swiper-button-prev'
//     		autoplay:5000
    	});
//  	视频控制
		$(".play").on("click",function () {
			$(this).hide();
			playVid();
		})
		$("#video1").on("click",function () {
			pauseVid();
			$(".play").show()
		})
		function playVid(){
  			$("#video1").get(0).play();
  		}
		function pauseVid(){
  			$("#video1").get(0).pause();
  		}
		
			//	轮播图2
		 var swiper = new Swiper('.swiper-container2', {
//      	pagination: '.swiper-pagination',
        	slidesPerView: 3,
        	paginationClickable: true,
        	spaceBetween: 40,
        	freeMode: true,
        	nextButton: '.next2 ',
        	prevButton: '.prev2'
    	});
    	
    	//	轮播图3
    	var swiper = new Swiper('.swiper-container3', {
//      	pagination: '.swiper-pagination',
        	slidesPerView: 3,
        	paginationClickable: true,
        	spaceBetween: 10,
        	freeMode: true,
        	nextButton: '.next3 ',
        	prevButton: '.prev3'
    	});
    	
//  	专家介绍 添加图片
    	for (var i = 0; i < 4; i++) {
			var imgSrc=$(".experts .swiper-slide").eq(i).find("img").attr("src");
			console.log(imgSrc)
			$(".experts .swiper-slide").eq(i).css("background-image","url("+imgSrc+")")
		}
//  	标题栏选中
    	navHover(0)
    	function navHover (num) {
    			$(".nav_list").find("li").eq(num).attr("class","hoverLi");
    			$(".nav_list").on("mouseenter",function () {
    				$(".nav_list").find("li").eq(num).removeClass("hoverLi")
    			}) 		
    	}
    	
    	
    	
    	
	
		})
	</script>
</html>
